<template>
	<view id="search">
		<!-- 搜索栏目 -->
		<u-sticky>
			<view class="search">
				<u-search 
				    v-model='search' 
					:show-action="true" 
					actionText="搜索" 
					bgColor='#F8F8F8' 
				
					@search='addHistory()' 
					@custom='addHistory()'
				></u-search>
			</view>
		</u-sticky>
		<!-- 历史搜索 暂未完成-->
		<view class="search_history" v-show="show">
			<view class="history_title">
				<text>历史搜索</text>
				<u-modal 
				    :show="modelShow" 
					:title="title" 
					:content='content'
					:showCancelButton='true'
					@confirm='closeModel'
					@cancel='cancel'
				></u-modal>
				<u-icon name="trash" @click="modelShow = true"></u-icon>
			</view>
			<view class="history_content">
				<u-tag
				      :text="item" 
					  size="mini" 
					  shape="circle" 
					  color='#464646' 
					  plain
					  bgColor='#F8F8F8'
					  v-for="(item,index) in historyList"
					  :key='index'
				></u-tag>
			</view>
		</view>
		
		<view class="content">
			<view style="padding: 0px;">
				<navigator url="./chatcontent">
			      <u-swipe-action>
			        <u-swipe-action-item
			          :options="options1"
						@click="cancel"
			        >
			          <view class="swipe-action u-border-top u-border-bottom">
			            <view class="swipe-action__content">
			            <navigator url="./contact">
						 <u-icon color="#ef9401" name="server-fill" size="48" style="padding-left: 5%;" ></u-icon>
						</navigator>
						 <view class="talk">
							 <view class="talk1">
							 		 <text class="swipe-action__content__text">{{service}}</text><span>{{time}}</span>
							 </view>
						 
						
							 <p>尊敬的客户你好！我是小罗</p>
						 </view>
						
			            </view>
			          </view>
			        </u-swipe-action-item>
			      </u-swipe-action>
				  </navigator>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 options1: [{
				                    text: '删除'
				                }],
				modelShow:false,
				service:'客服-小罗',
				title:'标题',
				content:'确定删除全部历史记录',
				search:'',
				historyList:[],
				time:'12-30',
			}
		},
		onLoad() {
			
		},
		computed:{
			
			show(){
				return this.historyList.length
			}
		},
		methods: {
			cancel(){
				console.log("123")
			},
			getList(){
				
				console.log('没有更多了')
			},
			addHistory(){
				if(this.search!==''){
					this.historyList.unshift(this.search)
				}
				console.log(this.search)
				console.log(this.historyList)
			},
			closeModel(){
				this.modelShow=!this.modelShow;
				this.historyList=[]
			},
			cancel(){
				this.modelShow=!this.modelShow;
			}
		}
	}
</script>

<style lang="scss" scoped>
#search{
	
	// padding: 10px;
	width: 100%;
	.search{
		padding: 10px;
		background: #FFFFFF;
		
	}
	.search_history{
		padding: 10px;
		.history_title{
			display: flex;
			justify-content: space-between;
			text{
				font-size: 28rpx;
				font-weight: 800;
				
			}
		}
		
		.history_content{
			padding-top: 10px;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			/deep/ .u-tag{
				// width: 150rpx;
				// margin: 10px 0;
				margin: 10px auto;
				padding:5px 10px;
				border: none;
				
				text{
					margin: 0 auto;
					font-size: 20rpx;
					// text-align: center;
				}
			}
		}
	}
	
	.swipe-action__content{
		display: flex;
		
		padding: 1% 10% 1% 1% ;
	
	}
	
	.content{
		width: 100%;
		background:#2B8FFF;
	
	
	}
	.talk{
		padding-left: 5%;
		width: 80%;
		line-height: 10px;
		padding-top: 3%;
		justify-content: space-between;
	}
	
	.talk1{
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.talk p{
		font-size: 28rpx;
		width: 100%;
		margin-top: 3%;
	}
	 .u-page {
	        padding: 0;
	    }
	
	    .u-demo-block__title {
	        padding: 10px 0 2px 15px;
	    }
	
	    .swipe-action {
	        &__content {
	             padding: 25rpx 0;
	    
	            &__text {
	                 font-size: 32rpx;
	                 color: $u-main-color;
	             }
	        }
	    }



}		
</style>
